<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OSSJK 2.0</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../../../static/css/public.css" media="all" />
<style>
.detailTable_text {
	font-weight: bold;
}
</style>
</head>
<body class="childrenBody">
	<form class="layui-form" lay-filter="formTest" id="form">
		<!-- 基本信息模块 -->
		<fieldset class="layui-elem-field layui-field-title site-title">
			<legend>
				<div>基础信息</div>
			</legend>
		</fieldset>
		<table class="layui-table mag0">
			<colgroup>
				<col width="15%">
				<col width="30%">
				<col width="15%">
				<col width="30%">
			</colgroup>
			<tbody class="detailTable">
				<tr>
					<td class="detailTable_text">名称</td>
					<td><input type="text" class="layui-input " lay-verify="required" placeholder="请输入真实姓名" name="name"></td>
					<td class="detailTable_text">金额</td>
					<td><input type="text" class="layui-input amount" disabled><input type="hidden" class="layui-input  amount" name="amount"></td>

				</tr>
				<tr>
					<td class="detailTable_text">原因</td>
					<td colspan="3"><input lay-verify="required" type="text" class="layui-input" placeholder="" name="reason"></input></td>

				</tr>
				<tr>
					<td class="detailTable_text">开始时间</td>
					<td><input type="text" name="sttm" id="sttm" lay-verify="required" autocomplete="off" class="layui-input">
					<td class="detailTable_text">结束时间</td>
					<td><input type="text" name="edtm" id="edtm" lay-verify="required" autocomplete="off" class="layui-input">
				</tr>
				<tr>
					<td class="detailTable_text">备注</td>
					<td colspan="3"><input type="text" class="layui-input" placeholder="" name="remarks"></input></td>
				</tr>
			</tbody>
		</table>
		<fieldset class="layui-elem-field layui-field-title site-title">
			<legend>
				<div>子项目</div>
			</legend>
		</fieldset>
		<table class="layui-table mag0" id="subreimburse" lay-filter="subreimburse">
			<thead>
				<tr>
					<th></th>
					<th>名称</th>
					<th>金额</th>
					<th>是否有发票</th>
					<th>备注</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="6">
						<div style="text-align: center">
							<a class="layui-btn layui-btn-xs" id="subreimburse-add">添加</a>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="rw">
			<fieldset class="layui-elem-field layui-field-title site-title">
				<legend>
					<div>审核情况</div>
				</legend>
			</fieldset>
			<div class="layui-form-item layui-row layui-col-xs12">
				<label class="layui-form-label">审核人</label>
				<div class="layui-input-block">
					<input placeholder="" class="layui-input" id="rwer" name="rwer">
				</div>
			</div>
			<div class="layui-form-item layui-row layui-col-xs12">
				<label class="layui-form-label">审核时间</label>
				<div class="layui-input-block">
					<input placeholder="" class="layui-input" id="rwtm" name="rwtm">
				</div>
			</div>
			<div class="layui-form-item layui-row layui-col-xs12">
				<label class="layui-form-label">审核状态</label>
				<div class="layui-input-block">
					<select name="rwst" disabled>
						<option value="">无</option>
						<option value="1">待审核</option>
						<option value="2">通过</option>
						<option value="3">不通过</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item layui-row layui-col-xs12">
				<label class="layui-form-label">审核原因</label>
				<div class="layui-input-block">
					<input placeholder="" class="layui-input" id="rwrs" name="rwrs">
				</div>
			</div>
		</div>
		<div class="magt10 layui-right">
			<div class="layui-input-block">
				<button type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="submit">提交</button>
				<button type="button" class="layui-btn layui-btn-sm layui-btn-primary close-btn">取消</button>
			</div>
		</div>
	</form>
	<script type="text/javascript" src="../../../static/js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="../../../static/layui/layui.js"></script>
	<script type="text/javascript" src="../../../static/js/index.js"></script>
	<script type="text/javascript" src="../../../static/custom/js/constant.js"></script>
	<script type="text/javascript" src="../../../static/custom/js/common.js"></script>
	<script type="text/javascript">
		layui.config({
			base : '../../../static/plugin/layui_extends/'
		}).extend({
			selectN : 'selectN'
		}).use([ 'selectN', 'form', 'laydate', 'layer' ], function() {
			var form = layui.form;
			var laydate = layui.laydate;
			var selectN = layui.selectN;
			var layer = parent.layer === undefined ? layui.layer : top.layer, $ = layui.jquery;
			var insertApi = "../../../finance/reimburse/insert";
			var toUpdateDetailApi = "../../../finance/reimburse/toUpdateDetail";
			var updateDetailApi = "../../../finance/reimburse/updateDetail";
			var insertMethod = "post";
			var updateDetailMethod = "post";
			var url = updateDetailApi;
			var method = updateDetailMethod;
			//初始化日期
			laydate.render({
				elem : '#sttm'
			});
			//初始化日期
			laydate.render({
				elem : '#edtm'
			});
			laydate.render({
				elem : '#rwtm'
			});

			//添加子项目
			$("#subreimburse-add").click(function() {
				$("#subreimburse-add").parent().parent().parent().before(subreimburseHtml());
				form.render(); // 更新全部
				//显示删除按钮
				$(".deleteitem-btn").show();
				setText();
			});

			//拼接子项目字段
			function subreimburseHtml(index, obj) {
				if (!obj) {
					obj = {
						name : '',
						amount : '',
						isreceipt : ''
					}
				}
				if (!obj.remarks) {
					obj.remarks = ''
				}
				if (!index) {
					index = 1;
				}
				var str = null;
				str += '<tr class="subreimburse">                                                                                                   ';
				str += '	<td class="detailTable_text subreimburse-text">报销项目' + index + '</td>                                                                               ';
				str += '	<td><input type="text" class="layui-input sname" lay-verify="required" placeholder="请输入项目名" name="sname" value="'+obj.name+'"></td>         ';
				str += '	<td><input type="text" class="layui-input samount" lay-verify="required/number" placeholder="请输入金额" name="samount" value="'+obj.amount+'"></td>         ';
				str += '	<td>                                                                                                                                      ';
				str += '		<select name="sisreceipt" class="sisreceipt" lay-verify="required">                                                         ';
				str += '			<option value="">是否有发票</option>                                                                                    ';
				str += '			<option value="1"' + (obj.isreceipt == 1 ? 'selected' : '') + '>是</option>                                                                                               ';
				str += '			<option value="2"' + (obj.isreceipt == 2 ? 'selected' : '') + ' >否</option>                                                                                               ';
				str += '		</select>                                                                                                                         ';
				str += '	</td>                                                                                                                                     ';
				str += '	<td><input type="text" class="layui-input sremarks"  name="sremarks" class="samount" value="'+obj.remarks+'"></td>         ';
				str += '	<td><a class="layui-btn layui-btn-xs layui-btn-danger deleteitem-btn">删除</a></td>';
				str += '</tr>';
				return str;
			}
			$("tbody").on("blur", ".samount", function() {
				var money = 0;
				for (var i = 0; i < $(".samount").length; i++) {
					money += Number($(".samount").eq(i).val());
				}
				$(".amount").val(money);
			});
			$("tbody").on("click", ".deleteitem-btn", function() {
				$(this).parent().parent().remove();
				if ($(".subreimburse").length <= 1) {
					$(".deleteitem-btn").hide();
				}
				setText();
			});
			function setText() {
				for (var i = 1; i <= $(".subreimburse").length; i++) {
					$(".subreimburse-text").eq(i - 1).text("子项目" + i);
				}

			}
			//回显表单
			var id = getUrlParam("id");
			var type = getUrlParam("type");
			////如果type=1，则是查看详细，type=2，则是编辑详细
			if (type != 3) {
				$("#form").append("<input type='hidden' name='id' value="+id+">");

				loadAjax( toUpdateDetailApi + "/" + id, "get", null, function(response) {
					baseCallBack(response, function(response) {
						console.log(response.data);
						fomrVal(form, "formTest", response.data.reimburse);
						if (response.data.employee) {
							$("#rwer").val(response.data.employee.rname);
						}
						$(".amount").val(response.data.reimburse.amount);
						var length = 0;
						for ( var i in response.data.subreimburse) {
							length++;
							$("#subreimburse-add").parent().parent().parent().before(subreimburseHtml(parseInt(i) + 1, response.data.subreimburse[i]));
						}
						if (length == 0) {
							$("#subreimburse-add").parent().parent().parent().before(subreimburseHtml());
						}
						if (length <= 1) {//隐藏删除按钮
							$(".deleteitem-btn").hide();
						}
						//如果type=1，则是查看员工详细，将所有按钮隐藏，所有文本不可编辑
						if (type == 1) {
							$("input").attr("disabled", true);
							$("select").attr("disabled", true);
							$("textarea").attr("disabled", true);
							$("a").css("display", "none");
							$("button").css("display", "none");
						} else {
							$(".rw").css("display", "none");
						}
						form.render();

					});
				});
			} else {
				//最少添加一条子项目
				$("#subreimburse-add").parent().parent().parent().before(subreimburseHtml());
				$(".deleteitem-btn").hide();
				$(".rw").css("display", "none");
				form.render();

			}

			//提交表单
			form.on("submit(submit)", function(data) {
				for (var i = 0; i < $(".sremarks").length; i++) {
					if ($(".sremarks").eq(i).val() == '') {
						$(".sremarks").eq(i).val(" ");
					}
				}
				if (type == 3) {
					url = insertApi;
					method = insertMethod;
				}
				loadAjax( url, method, $("#form").serialize(), function(response) {
					baseCallBack(response, parentReloadCallBack);
				});
				return false;
			})
		});
	</script>
</body>
</html>